<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Navi Mehra</h1> <div class="content"> <h2>Scroll to see the magic.</h2> <div class="header__fake"> <div class="icn__wrap"> <i class="icn__hamburger"></i> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none"> <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle> </svg> </div> <i class="btm__border"></i> </div> <a href="https://www.facebook.com/people/Nav-Mehra/100008253515887"></a> <h1>Hi<span><a href="https://www.facebook.com/people/Nav-Mehra/100008253515887">Now scroll back up.</a></span></h1> </div>

body { background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0; -webkit-background-size: 100% auto; background-size: 100% auto; color: #fff; font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif; font-weight:lighter; letter-spacing:1px; } .content { width: 320px; position: relative; margin: 0 auto; } .content h2 { margin: 35px 0 0; } .content h1 { text-align: center; margin: 1000px 0 200px; } .content h1 span { display: block; width: 100%; margin: 5px 0 0; opacity: .5; } .content .header__fake { position: fixed; top: 15px; left: 50%; margin-left: -160px; width: 320px; } .content .header__fake i { display: block; } .content .header__fake .btm__border { height: 1px; background: #fff; position: absolute; bottom: 6px; left: 0; right: 0; -webkit-transition: left 0.5s; transition: left 0.5s; } .content .header__fake .icn__wrap { cursor: pointer; float: right; width: 58px; position: relative; height: 58px; margin-right: -20px; } .content .header__fake .icn__wrap .icn__hamburger { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-6px); -ms-transform: translateX(-50%) translateY(-6px); transform: translateX(-50%) translateY(-6px); display: block; width: 18px; height: 1px; z-index: 999; background: #fff; } .content .header__fake .icn__wrap .icn__hamburger:after, .content .header__fake .icn__wrap .icn__hamburger:before { content: ""; float: left; display: block; width: 100%; height: 1px; background: #fff; margin: 5px 0 0; } .content .header__fake .icn__wrap .icn__hamburger:before { margin: 6px 0 0; } .content .header__fake .icn__wrap svg { z-index: 10; } .content .header__fake .icn__wrap svg circle { fill: none; stroke: #fff; stroke-width: .5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 39 39; stroke-dashoffset: -39; -webkit-transition: stroke-dashoffset 0.5s; transition: stroke-dashoffset 0.5s; } .content .header__fake.animated .btm__border { left: 100%; right: 4px; } .content .header__fake.animated svg circle { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.5s; transition: stroke-dashoffset 0.5s; } .content .header__fake.fix .btm__border { -webkit-animation: fix 0.2s linear; animation: fix 0.2s linear; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; right: 5px; } .h2, h2 { font-size: 26px; } @-webkit-keyframes fix { from { right: 5px; } to { right: 0px; } } @keyframes fix { from { right: 5px; } to { right: 0px; } }

<script> $header = $('.header__fake'); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 20) { $header.addClass('animated').removeClass('fix'); } else { $header.removeClass('animated').addClass('fix'); } }); </script>